<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="添加产品" v-model="visible" class="full" align-center width="1200px" @close="handleClose">
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.supplier.type" style="max-width: 120px">
            <el-option label="sku" value="sku"></el-option>
            <el-option label="自定义SKU" value="custom_sku"></el-option>
          </el-select>
          <el-input v-model="form.supplier.value" class="w-36" clearable></el-input>
        </VGroup>
        <el-input v-model="form.sku_cn_title" placeholder="产品名称" class="w-36" clearable></el-input>
        <el-select v-model="form.is_new" style="max-width: 120px" placeholder="是否新品" multiple clearable>
          <el-option label="否" :value="1"></el-option>
          <el-option label="是" :value="2"></el-option>
        </el-select>
        <el-input v-model="form.attribute_id" placeholder="产品分类" class="w-36" clearable></el-input>
      </template>
      <template #toolbar_btns>
        <div></div>
      </template>
    </VTable>
    <template #footer>
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit">选 择</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import { nextTick } from 'vue';
import api from './api'
import { ElMessage } from 'element-plus'
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})
const tableRef = ref()
// 查询
const query = () => {
  tableRef?.value.query()
}

// 列表配置
const tableOptions = reactive({
  size: 'small',
  rowConfig: { height: 'auto' },
  showOverflow: false,
  showHeaderOverflow: false,
  formConfig: {
    data: {
      supplier: { type: 'sku' },
    }
  },
  columns: [
    { type: 'checkbox', fixed: 'left', width: 40 },
    {
      title: '图片', width: 90, slots: {
        default: ({ row }) => {
          return <el-image src={row.main_img} />
        }
      }
    },
    {
      width: 100, slots: {
        header: ({ column }) => {
          return <div>
            <div>sku</div>
            <div>历史sku</div>
            <div>产品状态</div>
          </div>
        },
        default: ({ row }) => {
          return <div>
            <div>{row.sku}</div>
            <div>{row.sai_he_sku}</div>
            <div>{row.sku_status_name}</div>
          </div>
        }
      }
    },
    { field: 'sku_cn_title', title: '产品名称', minWidth: 100 },
    { field: 'update_user', title: '产品分类', minWidth: 100 },
    { field: 'warehouse', title: '仓库', minWidth: 150 },
    {
      width: 100, slots: {
        header: ({ column }) => {
          return <div>
            <div>供应商</div>
            <div>是否开票</div>
          </div>
        },
        default: ({ row }) => {
          return <div>
            <div>{row.supplier_name}</div>
            <div>{row.is_invoice_name}</div>
          </div>
        }
      }
    },
    {
      width: 100, slots: {
        header: ({ column }) => {
          return <div>
            <div>采购</div>
            <div>开发</div>
          </div>
        },
        default: ({ row }) => {
          return <div>
            <div>{row.purchaser_name}</div>
            <div>{row.developer_name}</div>
          </div>
        }
      }
    },
    { field: 'is_combination_name', title: '是否组合sku', width: 100 },
    {
      width: 100, slots: {
        header: ({ column }) => {
          return <div>
            <div>可用库存</div>
            <div>采购中库存</div>
          </div>
        },
        default: ({ row }) => {
          return <div>
            <div>{row.available_num}</div>
            <div>{row.purchase_num}</div>
          </div>
        }
      }
    },
    { field: 'remark', title: '备注', minWidth: 150 },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})

const emit = defineEmits(['close', 'change'])

// 打开弹窗
const open = async (selection) => {
  if (!load.value) {
    load.value = true
  }
  loadings = reactive({})
  visible.value = true
  nextTick(() => {
    tableRef.value.resetForm()
    tableRef.value.query()
  })
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const submit = () => {
  const selection = tableRef.value.$table.getCheckboxRecords()
  if (!selection.length) {
    ElMessage.warning('请先选择行')
    return
  }
  emit('change', selection)
  close()
}

defineExpose({ open })
</script>